<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>

        const canvas = document.querySelector("canvas");
        const ctx = canvas.getContext("2d");
        const points = [[110, 177],[135, 162], [180, 169],[196, 185]];
        const dots = new Set();
        class Dot {
            constructor(x,y,rmax,count) { //圆点，最大直径，闪烁次数（必须为偶数，否则消失的时候比较突兀）
                this.x = x;
                this.y = y;
                this.rmax = rmax;
                this.r = 0;
                this.speed = 0.1;
                this.rafId = null;
                this.count = count;
                this.animate('big');
                dots.add(this)
            }
            animate(flag) {
                if(this.count<=0) {
                    dots.delete(this)
                    console.log(11)
                    window.cancelAnimationFrame(this.rafId)
                    return; 
                }
                if(flag ==='big') { //变大
                    if(this.r<=this.rmax){
                        this.r+=this.speed;
                    }else {
                        this.r-=this.speed;
                        flag = 'small'
                        this.count--
                    }
                } else { //变小
                    if(this.r>=0){
                        this.r-=this.speed;
                    }else {
                        this.r+=this.speed;
                        flag = 'big'
                        this.count--
                    }
                }
                this.rafId =  window.requestAnimationFrame(()=> {
                    this.animate(flag)
                })
                
            }

        }


        
        for(let i=0;i<points.length;i++) {
            setTimeout(function() {
                new Dot(points[i][0],points[i][1],4,20)
            },200*i)
           
        }
        setTimeout(() => {
            drawDots(dots)
        }, 100);
        
        
        function drawDots(dots) {
            if(dots.size===0) {
                return;
            }
            ctx.save()
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            for(let dot of dots) {
                drawDot(dot)
            }
            window.requestAnimationFrame(function() {
                drawDots(dots)
            })
            ctx.restore()
        }
        function drawDot(dot) {
          ctx.save()
            ctx.beginPath(); //不写会和线连起来
            ctx.fillStyle="rgb(255,255,255)";
            //绘制
            ctx.arc(dot.x,dot.y,dot.r.toFixed(2),0,2*Math.PI);
            ctx.fill()
            ctx.closePath();
            ctx.restore()
            
        }
    </script>
</body>

</html>